// 绑定推荐es6箭头函数
// 形参变量名可以使用 _  表示老状态
// react中绑定事件---onXxx----合成事件

import React from 'react'
import { useState } from "react";

// 类组件
// 一定要有render方法
// constructor中 this.state={}定义状态
// this.state.xxx 直接修改状态，但render不会重新执行，不推荐
// this.setState修改状态
//    避免至二级修改（只使用老状态，不修改老状态）
//    react18中：异步 （并发模式）
//    react18前：合成事件---异步， 宏任务&Promise.then---同步
//    在同一个函数作用域中，多个this.setState会自动合并，为了减少没必要的diff运算，叫协调运算
// this.setState有两种写法：
// this.setState({}, callback) 在修改状态时，当新值与旧值无关时，推荐使用这种写法，callback表示当状态修改后，自动执行，当状态修完后，有一些业务逻辑放到callback中。
// this.setState((state, props)=>({}), callback) 当新值与旧值有关时，新值由旧值计算而来，形参state永远表示旧值，建议使用这种写法。callback表示当状态修改后，自动执行，当状态修完后，有一些业务逻辑放到callback中。

// class DemoA extends React.Component {
//     constructor(props) {
//         super(props)
//         this.state = {
//             num: 1
//         }
//     }
//     add(e) {
//         this.setState(_ => ({ num: _.num + 1 }))

//         // 可以简写 ↓
//         // this.setState((state)=>{
//         //     return{
//         //         num: state.num + 1
//         //     }
//         // })

//         // 不够优雅↓
//         // this.setState({
//         //     // num: this.state.num++   // ++在后，整体是旧值，界面永远是1
//         //     // num: ++this.state.num   // 数据ok，但不推荐，因为修改了两次num(直接+间接)
//         //     num: this.state.num + 1
//         // })
//     }
//     render() {
//         let { num } = this.state
//         return (
//             <div>
//                 <h1>类组件</h1>
//                 <div>{num}</div>
//                 {/* es6 --- 箭头函数 */}
//                 <button onClick={(e) => this.add(e)}>+1</button>
//                 {/* es5 --- bind */}
//                 <button onClick={this.add.bind(this)}>+1</button>
//             </div>
//         )
//     }
// }

// 函数组件
// useState定义状态
// 参数1---状态  参数2---修改状态
// 18之前：合成事件---异步，宏任务&promise.then---同步
// 18：异步
// setNum中，没有callback

function DemoA() {
    let [num, setNum] = useState(1)
    let [list, setList] = useState([])
    let add = () => {
        setNum(_=>_+1)
        // setNum(num + 1)
    }
    return (
        <div>
            <h1>函数组件</h1>
            <h1>{num}</h1>
            <button onClick={add}>+1</button>
        </div>
    )
}

export default DemoA


